<template>
    <div class="main">
        <Header class="main_header"/>
        <div style="height: 63px;"></div>
        <div class="main_body">
            <div class="main_body_chat">
                <!--        <div class="main_body_chat_title">聊天</div>-->
                <div class="main_body_chat_title">爬虫</div>
                <div class="main_body_chat_answer">
                    <!--          <a-input placeholder="请输入内容..." v-model:value="answer" size="large"></a-input>-->
                    <a-input placeholder="请输入作者名..." v-model:value="username" size="large"></a-input>
                    <!--          <a-button @click="chat" class="main_body_chat_answer_send" type="primary">发送</a-button>-->
                    <a-button @click="crawlerCSDN" class="main_body_chat_answer_send" type="primary">开始爬取</a-button>
                </div>
                <div class="main_body_chat_result">
                    <!--          <div v-html="result" class="main_body_chat_result_content"></div>-->
                    <div v-for="(item,index) in articleList" :key="index">
                        <div>{{ item.title }}</div>
                        <div v-html="item.content" class="main_body_chat_result_content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue'
import axios from "axios";
import {ref} from "vue";
import {message} from "ant-design-vue";
import {crawler} from "@/api/crawler";

//需要爬取的作者
const username = ref<string>('')

//爬取的文章
const articleList = ref()

//爬虫
const crawlerCSDN = () => {
    crawler(username.value).then((res) => {
        articleList.value = res.data.data.list
        console.log(res.data.data.list)
    })
}

//问题
const answer = ref<string>('')

//答案
const result = ref<string>('')

//chatgpt
const chat = () => {
    if (answer.value != '') {
        axios.post("https://api.openai.com/v1/completions",
            {
                'model': 'text-davinci-003',
                'prompt': answer.value,
                'max_tokens': 4000
            },
            {
                headers: {
                    'Authorization': 'Bearer  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',
                    'Content-Type': 'application/json'
                }
            }).then((res) => {
            result.value = res.data.choices[0].text
            console.log(res.data.choices[0].text)
            console.log(res.data.choices[0])
        })
    } else {
        message.warn("请输入问题")
    }
}
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;

  .main_header {
    height: 70px;
    position: fixed;
    width: 100%;
    z-index: 99999;
  }

  .main_body {
    margin-left: 15%;
    margin-right: 15%;
    word-break: break-all;
    margin-top: 2%;

    .main_body_chat {
      background-color: #ffffff;

      .main_body_chat_title {
        text-align: center;
        padding: 10px;
        font-size: 30px;
        font-weight: bold;
      }

      .main_body_chat_answer {
        display: flex;

        .main_body_chat_answer_send {
          height: 50px;
          width: 100px;
        }
      }

      .main_body_chat_result {
        min-height: 50vh;

        .main_body_chat_result_content {
          margin-left: 10%;
          margin-right: 10%;
          white-space: pre-line;
          margin-bottom: 2%;
        }
      }
    }
  }
}
</style>